<template>
   <view class="login">
		 <view class="logo">
			<img src="/static/images/login/login_logo.png" alt="" srcset="" class="image">
			<text class="text">中新联供应链服务平台</text>
		 </view>
		 <view class="form">
				<view class="container">
					<input_icon @input="inputHandleProxy($event, 'phone')" prefix="phone" maxlength="11" type="number"  placeholder="输入手机号" />
					<input_code @input="inputHandleProxy($event, 'code')" type="number" :phone="phone"/>
				</view>
				<customButton classes="bigBt sure" :disabled="disabled" @tap="submit">确定</customButton>
		 </view>
		<view class="register">还没有中新联供应链账户？
			<text class="action" @tap="goto('/pages/register/index')">立即注册</text>
		</view>
		<view class="agreenment">登录即为已阅读并同意
			<text class="action" @tap="goto('/pages/web-view/index', {url: 'https://request.zxlscm.com/service_protocol.html'})">《注册协议》</text>
		</view>
	 </view>
</template>
<script>
import input_icon from '@/common/components/input/input-icon/index.vue'
import input_password from '@/common/components/input/input-password/index.vue'
import input_code from '@/common/components/input/input-code/index.vue'
import customButton from '@/common/components/button/index.vue'

export default {
	data() {
		return {
			phone: '',
			code: ''
		}
	},
	computed: {
		disabled () {
		  return !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone) || !this.code
		}
	},
	components: {
		input_icon, input_code, customButton
	},
  methods: {
		inputHandleProxy(e, type) {
			this[type] = e.target.value
		},
		submit() {
			console.log('roleType='+this.$store.state.role)
			if(!this.disabled) {
				this.http.POST({
				  name: 'validation',
				  params: {
				    roleType: this.$store.state.role, // 导购ID,
				    phone: this.phone,
				    code: this.code
				  }
				}).then(res => {
				  if (res.result == 'success') {
						uni.setStorageSync('sessionId', res.data)
						uni.navigateTo({
							url: '/pages/companySelect/index'
						})
					}
				})
				// uni.navigateTo({
				// 	url: '/pages/companyEmpty/index'
				// })
			}
		}
  }
}
</script>
<style>
	.login {
     height:100vh;
		 width: 100%;
     background: #ffffff;
     overflow: hidden;
     position: relative;
		 padding-top: 80upx;
	}
	
	.login .logo {
		margin: 100rpx 0rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.logo .image {
		width: 386upx;
		height: 80upx;
	}
	.logo .text {
		margin-top: 5upx;
		font-weight: bold;
		font-size: 32upx;
		color: #999999;
	}
	
	.login .form {
		padding: 0upx 80upx;
	}
	.form .container {
		border: 1upx solid #DDDDDD;
		border-bottom: 0upx;
		margin-top: 50upx;
	}
	
	.login .register {
		color: #999999;
		font-size: 28upx;
		text-align: center;
		margin-top: 100upx;
	}
	.register .action {
		color: #009AFF;
	}
	
	.login .agreenment {
		color: #999999;
		font-size: 24upx;
		position: absolute;
		bottom: 65upx;
		left: 0upx;
		right: 0upx;
		text-align: center;
	}
	.agreenment .action {
		color: #009AFF;
	}
</style>